<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.userName" clearable class="filter-item" style="width: 200px;" :placeholder="$t('请输入用户名称')"/>
      <el-input v-model="listQuery.subscribeName" clearable class="filter-item" style="width: 200px;" :placeholder="$t('请输入订阅名称')"/>
      <el-select v-model="listQuery.status" clearable style="width: 200px" class="filter-item" :placeholder="$t('请输入订阅状态')">
        <el-option v-for="type in statusOptions" :key="type.value" :label="type.label" :value="type.value"/>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" v-permission="['GET /admin/p/lumiere_subscribe_user_index']" @click="handleFilter">{{$t('Search')}}</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" border fit highlight-current-row>

      <el-table-column align="center" :label="$t('用户名')" prop="userName">
      </el-table-column>

      <el-table-column align="center" :label="$t('订阅名称')" prop="subscribeName">

      </el-table-column>

      <el-table-column align="center" :label="$t('订阅商品')" prop="goodName">
      </el-table-column>

      <el-table-column align="center" :label="$t('订阅方式')" prop="method">
        <template slot-scope="scope">
             {{filterMethod(scope.row.method)}}
        </template>
      </el-table-column>
      <!--订单类型(1:自提；2：外送;3:堂食；4：邮寄)-->
      <el-table-column align="center" :label="$t('配送门店')" prop="shopName">
      </el-table-column>

      <el-table-column align="center" :label="$t('配送周期')" prop="deliveryDays">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.method == 2">{{$t('每周')}}{{scope.row.deliveryDays}}</el-tag>
          <el-tag v-else-if="scope.row.method == 3">{{$t('每月')}}{{scope.row.deliveryDays}}</el-tag>
          <el-tag v-else>{{$t('每天')}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('配送时间范围')">
        <template slot-scope="scope">
          <el-tag >{{scope.row.deliveryStartTime}}</el-tag>
          <el-tag >{{scope.row.deliveryEndTime}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('自动续订')"  width="200" prop="autoSub">
        <template slot-scope="scope">
          <el-tag>
            {{filterAutoSub(scope.row.autoSub)}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('收货方式')" prop="deliveryMethod">
        <template slot-scope="scope">
          <el-tag>
            {{filterTransportType(scope.row.deliveryMethod)}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('状态')"  width="200" prop="status">
        <template slot-scope="scope">
          <el-tag>
            {{filterStatus(scope.row.status)}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('到期时间')" prop="endTime"/>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-tooltip placement="top" :content="$t('Back_to_top')">
      <back-to-top :visibility-height="100" />
    </el-tooltip>
  </div>
</template>

<script>
  import { goodsOps } from '@/api/goods'
  import { shopOps } from '@/api/shop'
  import {subscribeusers} from '@/api/subscribe'
  import BackToTop from '@/components/BackToTop'
  import Pagination from '@/components/Pagination'
  import { querySubscribeUserList } from '../../api/subscribeUser' // Secondary package based on el-pagination
  export default {
    name: "subscribeUsers",
    components: { BackToTop, Pagination },
    data(){
      const defaultStatusOptions = [
        {
          label: this.$t('已过期'),
          value: 0
        },
        {
          label: this.$t('正常'),
          value: 1
        },
        {
          label: this.$t('未激活'),
          value: 2,
        }
      ]

      return {
        defaultStatusOptions,
        statusOptions: Object.assign({}, defaultStatusOptions),
        list: [],
        total: 0,
        listLoading: false,
        listQuery: {
          subscribeName: undefined,
          userName: undefined,
          status: undefined,
          page: 1,
          limit: 20,
          name: undefined,
          sort: 'add_time',
          order: 'desc'
        },
        goodsOps: [],
        shopOps: []
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        querySubscribeUserList(this.listQuery).then(response => {
          // //debugger
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      filterMethod(method){
        if(method == 1){
          return this.$t('周')
        }else if(method == 2){
          return this.$t('月')
        }else{
          return this.$t('年')
        }
      },
      handleDetail(item){
        this.$router.push({path: '/subscribe/user/detail', query: {id: item.id}})
      },
      filterAutoSub(autoSub){
        if(autoSub == false) {
          return this.$t('不自动续订')
        }else{
          return this.$t('自动续订')
        }
      },
      filterStatus(status){
        if(status == 0) {
          return this.$t('已过期')
        }else if(status == 1){
          return this.$t('正常')
        }else if(status == 2){
          return this.$t('未激活')
        }
      },
      filterTransportType(transportType){
        if(transportType == 1){
          return this.$t('自取')
        }else if (transportType == 2) {
          return this.$t('门店配送')
        }else{
          return this.$t('物流')
        }
      }
    }
  }
</script>

<style scoped>

</style>
